<template>
  <div
    v-if="type === 'in'"
    class="tag-in"
    :style="{
      color: color,
      backgroundColor: colorToRGBA(color, 0.1),
    }"
  >
    <slot />
  </div>
  <div v-else class="tag-out">
    <div
      class="icon"
      :style="{
        backgroundColor: color,
      }"
    ></div>
    <slot />
  </div>
</template>

<script>
export default {
  name: "Tag",
  props: {
    color: {
      type: String,
      default: "#ccc",
    },
    type: {
      type: String,
      default: "in",
    },
  },
  methods: {
    colorToRGBA(color, alpha) {
      if (color.charAt(0) === "#") {
        color = color.substr(1);
      }
      if (color.length === 3) {
        color = color.split("");
        color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
      }
      const r = parseInt(color.substr(0, 2), 16);
      const g = parseInt(color.substr(2, 2), 16);
      const b = parseInt(color.substr(4, 2), 16);
      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    },
  },
};
</script>

<style scoped lang="scss">
.tag-in {
  border-radius: 3px;
  padding: 0 8px;
  font-size: 12px;
}
.tag-out {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  .icon {
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 2px;
  }
}
</style>
